<script setup lang="ts">
import infoTable from '@/components/Echart/Table/personal_infoTable.vue'
import { storeToRefs } from 'pinia'
import { reactive, watch } from 'vue'
import { useDealerDataStore } from '@/stores/module/dealerData'
const dealerDataStore = useDealerDataStore() // 创建store实例
const { distributorBasicInfo } = storeToRefs(dealerDataStore)

watch(
  () => distributorBasicInfo.value,
  (newVal, oldVal) => {
    distributorBasicInfo.value = newVal
  }
)
</script>
<template>
  <card-box>
    <template v-slot:title>
      <h1>{{ distributorBasicInfo?.title || '' }}</h1>
    </template>
    <infoTable
      v-if="distributorBasicInfo?.info"
      :table-data="distributorBasicInfo.info"
    />
    <div class="NoPlanYet-box" v-else>
      <p>{{ $t('bi_common_nodata' )}}</p>
    </div>
  </card-box>
</template>
<style lang="scss" scoped>
.NoPlanYet-box {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/NoPlanYet-icon.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 183px 165px;

  font-size: 16px;
  color: #00f6ff;
  p {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
